@import 'mixins_and_variables_and_functions';
@import 'page_bundles/commits';
@import 'page_bundles/commit_description';

$tabs-holder-z-index: 250;
$comparison-empty-state-height: 62px;
$merge-request-sticky-header-height: 45px;

.apply-suggestions-input-min-width {
  @include gl-container-width-up(lg, panel) {
    width: $gl-dropdown-width-wide;
  }
}

.media-section {
  @include gl-container-width-down(lg, panel) {
    align-items: flex-start;

    .media-body {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  .code-text {
    @include gl-container-width-up(lg, panel) {
      align-self: center;
      flex: 1;
    }
  }
}

.mr-source-commit {
  margin-bottom: 0;

  .commit {
    margin: 0;
    padding: 10px;
    list-style: none;

    &:hover {
      background: none;
    }
  }
}

.compare-commit-empty {
  min-height: $comparison-empty-state-height;
}

.nothing-here-block {
  img {
    width: 230px;
  }
}

.mr-list,
.issuable-list {
  .merge-request {
    padding: 10px $gl-padding;
    display: flex;

    .issuable-info-container {
      flex: 1;
    }

    .merge-request-title {
      margin-bottom: 2px;
    }
  }
}

.merge-request-select {
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;

  @include gl-container-width-up(sm, panel) {
    float: left;
    width: 50%;
    margin-bottom: 0;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.issuable-form-select-holder {
  display: inline-block;
  width: 100%;

  @include gl-container-width-up(md, panel) {
    width: 250px;
  }

  .dropdown-menu-toggle {
    width: 100%;
  }
}

.table-holder {
  .ci-table {
    th {
      background-color: var(--white, $white);
      @apply gl-text-strong;
    }
  }
}

@supports (container-type: scroll-state) {
  .merge-request-sticky-header-wrapper {
    @include gl-container-width-up(md, panel) {
      top: $calc-application-header-height;
      min-height: 88px;
      container-type: scroll-state;
      container-name: sticky-header;
      z-index: $top-bar-z-index - 1;
      @apply gl-sticky;
    }
  }

  .merge-request-sticky-header {
    @include gl-container-width-up(md, panel) {
      &:has(.detail-page-description)::after {
        height: calc(#{$merge-request-sticky-header-height} + 26px); // Height of the 2 sticky bars combined
      }

      &::after {
        content: '';
        top: $calc-application-header-height;
        height: $merge-request-sticky-header-height;
        @include translucent-glass-background;
        @apply gl-border-b;
        @apply gl-fixed;
        @apply gl-left-0;
        @apply gl-right-0;
        @apply gl-z-0;
        @apply gl-hidden;
      }

      @container sticky-header scroll-state(stuck: top) {
        &::after, .merge-request-sticky-title {
          @apply gl-block;
        }

        .merge-request-tabs-container {
          @apply gl-flex-row;
        }

        .merge-request-tabs {
          @apply gl-h-auto;
        }

        .nav-links li a {
          @apply gl-py-4;
        }

        .detail-page-description {
          @apply gl-pt-1;
          @apply gl-pb-0;
          @apply gl-flex-nowrap;
        }

        time,
        .merge-request-author-container {
          @apply gl-hidden;
        }

        .merge-request-tabs-container,
        .detail-page-description {
          @apply gl-z-1;
        }
      }
    }
  }
}

@supports not (container-type: scroll-state) {
  .merge-request-sticky-header {
    z-index: calc($top-bar-z-index - 1);
    min-height: $mr-sticky-header-height; // Allow container to grow with content or browser zoom
    @include translucent-glass-background;
  }
}

.merge-request-tabs-container {
  .discussion-filter-container {
    &:not(:only-child) {
      margin: $gl-padding-4;
    }
  }
}

.container-fluid {
  // Negative margins for mobile/tablet screen
  .diffs.tab-pane {
    margin: 0 (-$gl-padding);
  }
}

// Wrap MR tabs/buttons so you don't have to scroll on desktop
@include gl-container-width-down(lg, panel) {
  .merge-request-tabs-container {
    @apply gl-flex-row;
  }
}

@include gl-container-width-down(md, panel) {
  .merge-request-tabs-container {
    @apply gl-flex-col-reverse;
  }
}

// Hide actions on sticky header when right sidebar is expanded
// and viewport is medium.
.right-sidebar-expanded {
  .merge-request-sticky-header {
    @include gl-container-width-up(md, panel) {
      @container sticky-header scroll-state(stuck: top) {
        .merge-request-tabs-container .merge-request-tabs-actions {
          @apply gl-hidden;
        }
      }
    }
  }
}

@include gl-container-width-down(xl, panel) {
  .right-sidebar-expanded {
    .merge-request-tabs-container {
      flex-direction: column-reverse;
      align-items: flex-start;
    }
  }
}

.fork-sprite {
  margin-right: -5px;
}

.merge-request-details .file-finder-overlay.diff-file-finder {
  position: fixed;
  z-index: 99999;
  @apply gl-bg-overlay;
}

// stylelint-disable-next-line gitlab/no-gl-class --- We need a slightly smaller spinner to fit the design
.mr-widget-check-checking .gl-spinner {
  width: 12px;
  height: 12px;
}

// Firefox rendering bug fix - force new stacking context
.diffs.tab-pane,
.notes.tab-pane {
  @supports (-moz-appearance: none) {
    transform: translateZ(0);
  }
}
